  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口测试工具</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <div id="wrapper" v-cloak>
      <el-container>
        <el-header>
          <div>
            <el-row type="flex" justify="space-between">
              <el-col :span="4">
                <span class="title">服务接口测试工具</span>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="testFun">开始测试</el-button>
              </el-col>
            </el-row>
          </div>
        </el-header>
        <el-main>
          <div class="center">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="5"><span class="main_title">服务列表</span></el-col>
              <el-col :span="1"><i class="el-icon-circle-plus" style="font-size: 32px;margin-left: 15px;cursor: pointer;" @click="addFun"></i></el-col>
            </el-row>
            <ul class="server_list" v-loading="loading">
              <li v-for="(item,index) in serverList" :key="index">
                <el-row type="flex" class="row-bg" justify="space-between" style="position: relative;">
                  <el-col :span="4" v-text="item.serverName"></el-col>
                  <el-col :span="10">{{ item.serverApi }}</el-col>
                  <el-col :span="2">
                    <el-popover
                      placement="top-start"
                      title=""
                      width="300"
                      trigger="hover"
                      content="">
                      <div class="parameterStyle">
                        {{ item.parameter }}
                      </div>
                      <span slot="reference" style="cursor: pointer;">参数</span>
                    </el-popover>
                  </el-col>
                  <el-col :span="2">{{ item.serverType }}</el-col>
                  <el-col :span="1">
                    <i v-if="item.result" class="el-icon-success" style="font-size: 24px;margin-left: 15px;margin-top:8px;cursor: pointer;color: #8fd460;"></i>
                    <i v-if="item.result === false" class="el-icon-error" style="font-size: 24px;margin-left: 15px;margin-top:8px;cursor: pointer;color: #d62215;"></i>
                  </el-col>
                  <el-col :span="3" style="position: absolute;right: -160px;">
                    <i class="el-icon-s-tools" style="font-size: 24px;cursor: pointer;margin-top:8px;color:#666;" @click="updServerFun(item,index)"></i>
                    <el-popconfirm title="确定需要删除该服务吗？" @confirm="deleteFun(index)">
                      <i class="el-icon-delete-solid" slot="reference" style="font-size: 24px;;margin-top:8px;color:#e84749;"></i>
                    </el-popconfirm>
                  </el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </el-main>
      </el-container>
      <!-- 增加服务 -->
      <el-dialog
        :title="judge==='add'?'增加服务':'修改服务'"
        :visible.sync="ServerStatus"
        width="700px">
        <el-form :model="serverRequest" label-width="150px">
          <el-form-item label="服务名称:">
            <el-input v-model="serverRequest.serverName" style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item label="测试地址:">
            <el-input v-model="serverRequest.serverApi" style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item label="访问方式:">
            <el-select v-model="serverRequest.serverType" placeholder="请选择访问方式" style="width:200px;">
              <el-option
                v-for="item in fw_type"
                :key="item.label"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求参数:">
            <el-input type="textarea" v-model="serverRequest.parameter" style="width:400px;" :rows="8"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="ServerStatus = false">取 消</el-button>
          <el-button type="primary" @click="addServerFun">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </body>
  </html>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javaScript">
    var wrapper = new Vue({
      el: '#wrapper',
      data: {
        loading: false,
        serverList: [],
        ServerStatus:false,
        serverRequest: {},
        fw_type: [
          {
            label: 'get'
          },
          {
            label: 'post'
          },
          {
            label: 'put'
          },
          {
            label: 'del'
          }
        ],
        judge: 'add',
        upd_index: null
      },
      watch: {
        serverList: {
          handler(newValue, oldVlaue) {
            localStorage.setItem("serverList", JSON.stringify(newValue));
          },
          deep: true
        }
      },
      created() {
        this.serverList = JSON.parse(localStorage.getItem("serverList"))?JSON.parse(localStorage.getItem("serverList")):[];
      },
      methods: {
        // 增加服务
        addFun() {
          this.judge = 'add'
          this.ServerStatus = true
          this.serverRequest = {}
        },
        // 增加和修改确定
        addServerFun() {
          if (this.serverRequest.serverName){
            if (this.judge === 'add') {
              this.serverRequest.result = false
              this.serverList.push(JSON.parse(JSON.stringify(this.serverRequest)))
            } else {
              this.serverList.forEach((item,index) => {
                if (this.upd_index === index) {
                  i = index
                  item = this.serverRequest
                }
              })
              if (this.upd_index !== null) this.serverList.splice(i,1,this.serverRequest)
            }
            this.ServerStatus = false
          } else {
            this.$message.error('请填写服务名称!')
          }
        },
        // 开始测试
        testFun() {
          let num = 0;
          let servernum = this.serverList.filter(value => {
            return value.serverApi
          })
          this.loading = true
          if (this.serverList.length > 0 ) {
            this.serverList.forEach(arr => {
              if (arr.serverApi) {
                axios[arr.serverType?arr.serverType:'get'](arr.serverApi, arr.parameter).then(result => {
                  if (result.status >= 200 && result.status < 300) {
                    arr.result = true
                  } else {
                    arr.result = false
                  }
                }).catch(err => {
                  arr.result = false
                }).finally(() =>{
                  num += 1
                  if (servernum.length === num) {
                    this.loading = false
                  }
                })
              } else {
                arr.result = false
              }
            })
          }
        },
        // 修改服务
        updServerFun(item,index) {
          this.judge = 'upd'
          this.upd_index = index
          this.ServerStatus = true
          this.serverRequest = JSON.parse(JSON.stringify(item))
          if (item.parameter) {
            this.serverRequest.parameter = item.parameter
          }
        },
        // 删除服务
        deleteFun(index) {
          console.log(index)
          this.serverList.splice(index, 1)
        }
      },
    })
  </script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    p{
      margin: 0;
      padding: 0;
    }
    ul,li{
      list-style: none;
    }
    #wrapper{
      width: 100vw;
      height: 100vh;
      min-width: 1200px;
      overflow: auto;
      background-color: #cdcdcd;
    }
    .el-header{
      background-color: #000;
      color: #fff;
      text-align: center;
      line-height: 60px;
    }
    
    .el-aside {
      background-color: #cdcdcd;
      color: #333;
      text-align: center;
    }
    
    .el-main {
      background-color: #cdcdcd;
      color: #333;
      text-align: center;
      padding: 0;
      padding-top: 10px;
    }
    
    .el-container {
      width: 100%;
      height: 100%;
      margin-bottom: 40px;
    }
    .center{
      width: 60%;
      margin: 0 auto;
      text-align: left;
    }
    .title{
      font-size: 24px;
    }
    .main_title{
      color: #000;
      font-size: 22px;
    }
    .server_list{
      margin-top: 10px;
    }
    .server_list li{
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      border-left: 5px solid #999;
      box-shadow: 0 1px 2px rgba(0,0,0,0.07);
      padding: 0 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
    .el-dialog__title{
      font-weight: bold;
      font-size: 22px;
    }
    .el-form-item__label{
      font-weight: bold;
      color: #333;
    }
    .parameterStyle{
      height: 200px;
      overflow: auto;
    }
  </style>